<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="form" :model="searchData" :inline="true" label-width="80px" size="mini"  style="margin-left: 20px; margin-top: 12px">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="日期">
              <el-date-picker
                v-model="searchData.dayTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item >
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
              <el-button size="mini" @click="reset">清 空</el-button>
              <el-button
                :loading="downloadLoading"
                class="filter-item"
                type="primary"
                icon="el-icon-download"
                @click="useExportUtil()"
              >
                导出
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        show-summary :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="expapp_AREANO"
          label="作业区"
          sortable
          header-align="center"
          align="center"
        />
<!--        <el-table-column label="正常计划" header-align="center" align="center">-->
          <el-table-column prop="expapp_WELLNAME" label="井号" header-align="center" align="center">

<!--              <template slot-scope="props">-->
<!--              <el-link v-if="props.row.plan_state === 0" type="primary" @click="modify(props.row)" :underline="false">{{props.row.ledger_WELL_NAME}}</el-link>-->
<!--              <el-link v-else type="danger" @click="modify(props.row)" :underline="false">{{props.row.ledger_WELL_NAME}}</el-link>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column
            prop="expapp_AMOUNTOFLIQUID"
            label="用液量（m3）"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="expapp_HOTWASHLOAD"
            label="热洗量（m3）"
            header-align="center"
            align="center"
          />
      </el-table>
    </div>
  </div>
</template>

<script>
import excelUtil from '@/utils/dealwithExcelUtil.js'

export default {
  name: 'expDayPlan',
  data() {
    return {
      searchData: {
        dayTime:""
      },
      tableData: [],
      downloadLoading: false
    }
  },
  created() {
    this.getListPage(this.searchData)
  },
  methods: {
    useExportUtil() {
      const date = this.searchData
      console.log(date)
      this.downloadLoading = true
      const initColumn = [
        {
          key: 'index',
          title: '#'
        },
        {
          key: 'expapp_AREANO',
          title: '作业区'
        },
        {
          key: 'expapp_WELLNAME',
          title: '井号'
        },
        {
          key: 'expapp_AMOUNTOFLIQUID',
          title: '用液量'
        },
        {
          key: 'expapp_HOTWASHLOAD',
          title: '热洗量'
        }
      ]
      this.$http
        .post('/expHotwashapplica/expDayPlan', date).then(({ data: { data: res }}) => {
          const tableData = res
          console.log(tableData, 'tabledata')
          tableData.forEach((item, index) => {
            item.index = index
          })
          excelUtil.exportExcel(initColumn, tableData, '异常井日计划.xlsx')
          this.downloadLoading = false
        }).catch(err => {
          this.downloadLoading = false
          this.$message.error(err)
        })
    },
    getListPage(data) {
      this.$http.post('/expHotwashapplica/expDayPlan', data).then(({ data: { data: res }}) => {
        this.tableData = res
      }).catch(err => {
        this.$message.error(err)
      })
    },
    search() {
      this.getListPage(this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    modify(data) {
      this.form = data
      this.dialogUpdateFormVisible = true
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index == 4) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              let num = Number(prev) + Number(curr)
              return num.toFixed(2)
            } else {
              return Number(prev).toFixed(2)
            }
          }, 0)
        } else if(index == 3 ){
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              let num = Number(prev) + Number(curr)
              return num
            } else {
              return prev
            }
          }, 0)
        }else {
          sums[index] = '--'
        }
      })
      return sums
    }
  }
}
</script>

<style scoped>

</style>
